<template>
	<view>
		<form>
			<view class="grace-idcard-items">
				<view class="grace-idcard-preview">
					<image :src="userExt.know_avatar || '/static/images/portrait.png'"  @tap="selectImg" mode="aspectFill"></image>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号</view>
				<input name="phone" v-model="userExt.know_phone" disabled="true" placeholder="" ></input>
			</view>
			<view class="cu-form-group">
				<view class="title">昵称</view>
				<input placeholder="请输入您的昵称" name="introduce" v-model="userExt.know_nickname"></input>
			</view>
			
			<view class="cu-form-group">
				<textarea placeholder-style="color:grey" placeholder="一句话介绍自己" v-model="userExt.know_desc"/>
			</view>
			<view class="pt10 m-t"><button class="primary booking-btn" formType="submit" @tap="uploadCards">保存修改</button></view>
		</form>
	</view>
</template>
<script>
var _self;
var  graceChecker = require("../../common/graceChecker.js");
import {  
        mapState, mapMutations
    } from 'vuex'; 
export default {
	/* onLoad:function(){
		_self = this;
		this.$api.memberGet('/setting/get').then(r=>{
		})
	}, */
	data() {
		return {
			index: 0,
			avatarUrl: '',
			userExt: this.$mStore.state.userInfo,
			/* userExt: {
				know_nickname: '',
				know_phone: '',
				know_desc: '',
				know_avatar: '',
			} */
		};
	},
	methods: {
		// ...mapMutations(['setUserImg']),
		
		/**
		 * 上传图片
		 */
		selectImg(type){
			let that = this;
			this.$mHelper.uploadImg((res)=>{
				uni.showLoading({ title: '正在上传中..' });
				that.$http
					.upload('api/common/upload', {
						filePath: res,
						name: 'file',
						// file: res, // 要上传文件资源的路径。
						
					})
					.then(res => {
						uni.hideLoading();
						let result = res.data;
						if (res.code == that.sucCode) {
							if(result.url){
								that.userExt.know_avatar = result.cdnurl;
								that.userExt.url = result.url;
							}
							
						} else {
							that.$mHelper.toast(res.msg);
						}
					})
					.catch(err => {
						that.$mHelper.toast('上传错误，请检查');
						uni.hideLoading();
					});
				
			});
			
		},
		
		async uploadCards(){
			uni.showLoading();
			// 因底层限制一次上传一个
			await this.$http.post('api/user/userupdate',this.userExt).then(res=>{
				this.$mHelper.toast(res.msg);
				uni.hideLoading();
				if(res.code === this.sucCode){
					let userInfo = this.$mStore.state.userInfo;
					userInfo = {...userInfo,...this.userExt};
					console.log('更新后的用户信息',userInfo);
					this.$mStore.commit('updateUserInfo',userInfo);
					
				}else{
					uni.hideLoading();
				}
				
			}).catch(err=>{
				console.log(err);
			})
			
		},
		/* selectImg : function() {
			uni.chooseImage({
				count:1,
				success: (res) => {
					this.$api.upload(res.tempFilePaths[0]).then(r=>{
						let result = JSON.parse(r.data);
						this.userExt.userImg = result.body.uploadPath;
					});
				}
			})
		}, */
		/* uploadCards : function(){
			// 因底层限制一次上传一个
			this.$api.memberGet('/setting', this.userExt).then(r=>{
				if(r.data.code == '200'){
					uni.showToast({
					    icon: 'none',
						position: 'bottom',
					    title: '操作成功'
					});
					if(this.userExt.userImg){
						this.setUserImg(this.avatarUrl);
					}
				}else{
					uni.showToast({
					    icon: 'none',
						position: 'bottom',
					    title: '操作失败'
					});
				}
			});
		} */
	},
}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.cu-form-group {
		background-color: #ffffff;
		padding: 1upx 30upx;
		display: flex;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
	}
	
	.cu-form-group+.cu-form-group {
		border-top: 1upx solid #eee;
	}
	
	.cu-form-group .title {
		text-align: justify;
		padding-right: 30upx;
		font-size: 30upx;
		position: relative;
		height: 60upx;
		line-height: 60upx;
	}
	
	.cu-form-group input {
		flex: 1;
		font-size: 30upx;
		color: #555;
		padding-right: 20upx;
	}
	
	.cu-form-group>text[class*="cuIcon-"] {
		font-size: 36upx;
		padding: 0;
		box-sizing: border-box;
	}
	
	.cu-form-group textarea {
		margin: 32upx 0 30upx;
		height: 4.6em;
		width: 100%;
		line-height: 1.2em;
		flex: 1;
		font-size: 28upx;
		padding: 0;
	}
	
	.cu-form-group.align-start .title {
		height: 1em;
		margin-top: 32upx;
		line-height: 1em;
	}
	
	.grace-idcard-main{margin:20upx 30upx;}
	.grace-idcard-desc{line-height:2em; background:#FFFFFF; padding:20upx; border-radius:10upx;}
	.grace-idcard-text{line-height:2em; margin-top:30upx;}
	.grace-idcard-items{background:#FFFFFF;  display:flex;  align-items: flex-start;}
	.grace-idcard-uper-btn{width:40%; margin:0 30upx; background:#F1F1F1; padding:22upx 0; border-radius:10upx; text-align:center;}
	.grace-idcard-uper-btn .img{width:100upx; height:100upx; margin:0 auto; margin-top:30upx;}
	.grace-idcard-uper-btn .img image{width:100upx; height:100upx;}
	.grace-idcard-uper-btn .text{width:100%; margin-bottom:10upx; text-align:center; line-height:2em;color: #666;}
	.grace-idcard-preview{width:200upx; margin:50upx auto 0;}
	.grace-idcard-preview image{width:200upx; height: 200upx; border-radius: 50%;}
	.cu-form-group-border-bottom{border-bottom: 0.5px solid #eee;}
	.cu-form-group picker {
		flex: 1;
		padding-right: 40upx;
		overflow: hidden;
		position: relative;
	}
	
	.cu-form-group picker .picker {
		line-height: 100upx;
		font-size: 28upx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
		text-align: left;
	}
	
	.cu-form-group picker::after {
		font-family: iconfont;
		display: block;
		content: "\e601";
		position: absolute;
		font-size: 26upx;
		color: #8799a3;
		line-height: 100upx;
		width: 60upx;
		text-align: center;
		top: 0;
		bottom: 0;
		right: -10upx;
		margin: auto;
	}
</style>
